<template>
  <div class="nav-bottom fixed-bottom">
    <ul class="nav-bottom__list">
      <li class="nav-bottom__item" :class="{'active':selected == 'home'}">
        <router-link to="/" replace>
          <svg-icon icon-class="home" />
          <p>首页</p>
        </router-link>
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'alliance'}">
        <router-link to="/alliance" replace>
          <svg-icon icon-class="alliance" />
          <p>联盟</p>
        </router-link>
      </li>
      <li class="nav-bottom__item">
        <div class="camera" @click="$utils.unfinish();">
          <img class="camera_img" src="@/assets/images/index_camera.png" alt="相机">
        </div>
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'shopCart'}">
        <router-link to="/shopCart" replace>
          <svg-icon icon-class="car-new" />
          <p>购物车</p>
        </router-link>
      </li>
      <li class="nav-bottom__item" :class="{'active':selected == 'person'}">
        <router-link to="/person" replace>
          <svg-icon icon-class="person" />
          <p>我的</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  },
  created() {
    // 获取当前路由名称，根据该名称给当前nav添加类名active
    this.selected = this.$route.name
  }
}
</script>

